<template>
    <div class="g-wrapper">
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="区域">
                    <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
                </el-form-item>
                <el-form-item label="账期" size="mini">
                    <el-date-picker
                        v-model="form.month"
                        type="month"
                        placeholder="选择日期"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>

                <el-form-item style="width: 5%">
                    <el-button size="mini" type="primary" @click="search()"
                        >查询</el-button
                    >
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button
                        size="mini"
                        style="margin-left: 10px"
                        type="orange"
                        @click="exportExcel"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <p class="g-unit">单位: 元</p>
        <div class="table-content">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
					id="table1"
                    ref="table"
                >
                    <el-table-column
                        label="序号"
                        type="index"
                        min-width="60"
                    ></el-table-column>
                    <el-table-column
                        min-width="136"
                        v-for="(it, i) in tableTitles"
                        :key="it + i"
                        :label="it"
                        :prop="tableProps[i]"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
import { mergeRow } from "@/utils/mixin";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
    name: "cloudStandard",
    data() {
        // var d = new Date().getMonth
        return {
            form: {
                month: "",
                areaId: '',
            },
            accountInfo: {},
            tableLoading: false,
            tableData: [],
            tableTitles: [],
            tableProps: [],
        };
    },
    methods: {
        async init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;
            this.form.month = this.moment().subtract(1, "months").format("YYYYMM");
            this.getData();
        },
        getData() {
            var that = this;

            that.tableLoading = true;
            that.tableData = [];
            $budgetAPI.getCloudStandardNew(
                {...this.form},
                (res) => {
                    if (res && res.code == 0) {
                        that.tableLoading = false;
                        that.tableData = res.content.data;
                        that.tableTitles = res.content.name;
                        that.tableProps = res.content.key;
                        that.$nextTick(() => {
                            that.$refs.table.doLayout();
                        });
                    }
                }
            );
        },
        search() {
            this.getData();
        },
        exportExcel() {
            if (process.env.NODE_ENV == "development") {
              window.location.href =
                  prefixAPI.loc  + 
                  `/api/cloudStandardNew/export?month=${this.form.month}&areaId=${this.form.areaId}`;
          } else if (process.env.NODE_ENV == "production") {
              window.location.href =
                  prefixAPI.hp +
                  `/api/cloudStandardNew/export?month=${this.form.month}&areaId=${this.form.areaId}`;
          }
            // var xlsxParam = {
            //     raw: true
            // }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            // let workbook = XLSX.utils.book_new();
            // let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            // XLSX.utils.book_append_sheet(workbook, ws1, '新增产品');
            // let wbout = XLSX.write(workbook, {
            //     bookType: 'xlsx',
            //     bookSST: true,
            //     type: 'array'
            // });
            // try {
            //     FileSaver.saveAs(
            //         new Blob([wbout], {
            //             type: 'application/octet-stream;charset=utf-8"'
            //         }),
            //         '新增产品.xlsx'
            //     );
            // } catch (e) {
            //     if (typeof console !== 'undefined') console.log(e, wbOut);
            // }
            // return wbout;
        },
    },
};
</script>

<style lang="scss" scoped>
.g-wrapper {
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;
            .btn-right {
                display: flex;
            }
            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
        .content {
            position: relative;
        }
    }
}
/deep/ .el-form-item--mini .el-form-item__content {
	line-height: 35px;
}
</style>
